import React from 'react';
import styled from 'styled-components';

interface BorderBoxProps {
  children: React.ReactNode;
  title?: string;
}

const Container = styled.div`
  position: relative;
  padding: 20px;
  background: rgba(0, 24, 48, 0.6);
  border: 1px solid rgba(0, 150, 255, 0.3);
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: rgba(0, 150, 255, 0.8);
    border-style: solid;
  }

  &::before {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
  }

  &::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
  }
`;

const Title = styled.div`
  position: absolute;
  top: -12px;
  left: 20px;
  padding: 0 10px;
  background: linear-gradient(90deg, rgba(0, 24, 48, 0.9), rgba(0, 24, 48, 0.9));
  color: rgba(0, 150, 255, 0.8);
  font-size: 14px;
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 4px;
    height: 4px;
    background: rgba(0, 150, 255, 0.8);
    transform: translateY(-50%) rotate(45deg);
  }

  &::before {
    left: -2px;
  }

  &::after {
    right: -2px;
  }
`;

const BorderBox: React.FC<BorderBoxProps> = ({ children, title }) => {
  return (
    <Container>
      {title && <Title>{title}</Title>}
      {children}
    </Container>
  );
};

export default BorderBox; 